<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="0.5rem">
  <div
    fxLayout="column"
    fxLayoutGap="1rem"
    fxFlex.sm="70%"
    fxFlex.md="65%"
    fxFlex.lg="60%"
    fxFlex.xl="50%"
  >
    <nz-card nzSize="small">
      <h2 [ngClass]="unit.colorClass">
        <i nz-icon [nzType]="unit.icon"></i>
        {{ unit.name }}
      </h2>
      <span>
        <span class="used">
          Used:
          <span
            class="monospace"
            [class.text-danger]="unit.modStack.usedTemp.gt(unit.maxModsTemp)"
            >{{ unit.modStack.usedTemp | format: true }}
          </span>
        </span>
        <span nz-popover [nzPopoverContent]="maxTemplate">
          Total:
          <span class="monospace">{{ unit.maxModsTemp | format: true }} </span>
        </span>
      </span>
      <form nz-form [nzLayout]="isLarge ? 'horizontal' : 'vertical'">
        <nz-form-item *ngIf="ms.game.prestigeManager.extremeModsCard.active">
          <nz-form-label [nzSpan]="isLarge ? 8 : null">
            <span nz-tooltip nzTooltipTitle="Increases max mods and price"
              >Extreme modding</span
            >
          </nz-form-label>
          <nz-input-number
            class="inputBox monospace"
            nzSize="small"
            name="extreme"
            nzMin="0"
            nzMax="100"
            [(ngModel)]="unit.extremeModLevelUi"
            (change)="onModChange(true)"
          ></nz-input-number>
          <span class="auto-qty text-success" *ngIf="unit.extremeBonus > 0">
            +<span class="monospace">{{
              unit.extremeBonus * 100 | format
            }}</span
            >% max mods
          </span>
          <span class="auto-qty text-danger" *ngIf="unit.extremeBonus > 0">
            x<span class="monospace">{{ unit.extremeMauls | format }}</span>
            unit price
          </span>
        </nz-form-item>
        <app-mod-line
          *ngFor="let mod of unit.modStack.mods; trackBy: getModId"
          [mod]="mod"
          [uiQuantityString]="mod.uiQuantityString"
          [priorityUi]="mod.priorityUi"
          [unit]="unit"
          [auto]="unit.autoMod.on"
          (modChange)="onModChange($event)"
          [extreme]="unit.extremeModLevel"
        ></app-mod-line>
      </form>

      <div fxLayout="row wrap" fxLayoutGap="1rem">
        <nz-radio-group [(ngModel)]="unit.autoMod.on" nzButtonStyle="solid">
          <label nz-radio-button [nzValue]="false"
            ><i nz-icon nzType="fa-r:hand-point-up"></i> Manual</label
          >
          <label nz-radio-button [nzValue]="true"
            ><i nz-icon nzType="sync" nzTheme="outline"></i> Auto
          </label>
        </nz-radio-group>

        <div fxLayoutGap="1rem">
          <nz-input-group nzCompact>
            <button
              *ngIf="!unit.autoMod.on"
              nz-button
              nzType="primary"
              [disabled]="disabled"
              (click)="confirm()"
            >
              <span>Confirm</span>
            </button>
            <button
              nz-button
              nzType="default"
              (click)="cancel()"
              *ngIf="!unit.autoMod.on"
            >
              <span>Reset mods</span>
            </button>

            <button
              *ngIf="unit.autoMod.on"
              nz-button
              nzType="primary"
              (click)="savePriorities()"
            >
              <span>Save Priorities</span>
            </button>
            <button
              nz-button
              nzType="default"
              *ngIf="unit.autoMod.on"
              (click)="resetPriorities()"
            >
              <span>Reset Priorities</span>
            </button>
          </nz-input-group>
        </div>
      </div>
      <nz-alert nzType="warning" nzShowIcon [nzDescription]="infoRef">
      </nz-alert>
    </nz-card>

    <nz-card nzSize="small" nzTitle="Mod Automation">
      <app-auto-mod [autoMod]="unit.autoMod"></app-auto-mod>
    </nz-card>
  </div>
  <div>
    <nz-table nzTemplateMode>
      <tbody>
        <tr>
          <td colspan="3" class="center"><strong>Production</strong></td>
        </tr>
        <tr *ngFor="let prod of unit.production">
          <td [ngClass]="prod.product.colorClass" class="no-wrap">
            <i nz-icon [nzType]="prod.product.icon"></i>
            {{ prod.product.name }}
          </td>
          <td class="min-w">
            <span class="monospace">{{ prod.prodPerSecFull | format }}</span>
          </td>
          <td class="min-w">
            <span class="monospace" [ngClass]="getProdClass(prod)">{{
              prod.prodPerSecMod | format
            }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3" class="center"><strong>Other</strong></td>
        </tr>
        <tr>
          <td>Price</td>
          <td>
            <span class="monospace">{{ unit.components | format }}</span>
          </td>
          <td>
            <span
              class="monospace"
              [ngClass]="getClass(unit.components, unit.componentsTemp, true)"
              >{{ unit.componentsTemp | format }}</span
            >
          </td>
        </tr>
        <tr>
          <td>Max Drones</td>
          <td>
            <span class="monospace">{{ unit.limit | format }}</span>
          </td>
          <td>
            <span
              class="monospace"
              [ngClass]="getClass(unit.limit, unit.limitTemp)"
              >{{ unit.limitTemp | format }}</span
            >
          </td>
        </tr>
        <tr>
          <td>Recycle</td>
          <td>
            <span class="monospace">{{ unit.recycle | format }}</span>
          </td>
          <td>
            <span
              class="monospace"
              [ngClass]="getClass(unit.recycle, unit.recycleTemp)"
              >{{ unit.recycleTemp | format }}</span
            >
          </td>
        </tr>
        <tr>
          <td>Base Recycle</td>
          <td>
            <span class="monospace">{{ ms.game.baseRecycling | format }}</span>
          </td>
          <td></td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</div>
<!-- nzSize="middle" -->

<ng-template #infoRef>
  <span>You will restart with {{ droneRestart | format: true }} Drones.</span>
  <span *ngIf="componentGain.gt(0)"
    >You will gain
    <span class="monospace">{{ componentGain | format }}</span>
    components.</span
  >
  <span>
    To rebuild all your new Drones you will need
    <span class="monospace">{{ componentNeed | format }} </span>
    components. You have
    <span class="monospace"
      >{{ componentTotal | format }} ({{ componentPercent }}%)</span
    >.
  </span>
</ng-template>

<ng-template #maxTemplate>
  <table nzTemplateMode nzSize="small">
    <tr>
      <td colspan="4" class="row-title">Technologies - additive</td>
    </tr>
    <tr *ngFor="let tech of unit.maxTechMods; trackBy: getTechId">
      <td>
        <span [style.color]="tech.technology.color">
          <i nz-icon [nzType]="tech.technology.icon"></i>
          {{ tech.technology.name }}</span
        >
      </td>
      <td class="monospace text-right">
        {{ tech.technology.quantity | format: true }}
      </td>
      <td class="monospace">x{{ tech.multi | number }}</td>
      <td class="monospace">
        = +{{ tech.technology.quantity.times(tech.multi) | format }}
      </td>
    </tr>
    <tr>
      <td colspan="4" class="row-title">Researches - multiplicative</td>
    </tr>
    <tr *ngFor="let res of getModRes(); trackBy: getResId">
      <td>{{ res.name }}</td>
      <td class="monospace text-right">{{ res.quantity | format: true }}</td>
      <td class="monospace">x{{ getResMod(res) | number }}</td>
      <td class="monospace">
        = x{{ res.quantity.times(getResMod(res)).plus(1) | format }}
      </td>
    </tr>
    <tr *ngIf="ms.game.achievementManager.moddersAck.quantity.gte(1)">
      <td colspan="4" class="row-title">Achievements</td>
    </tr>
    <tr *ngIf="ms.game.achievementManager.moddersAck.quantity.gte(1)">
      <td>Modders achievement</td>
      <td class="monospace text-right">
        {{ ms.game.achievementManager.moddersAck.quantity | format: true }}
      </td>
      <td class="monospace">x0.1</td>
      <td class="monospace">
        = x{{
          ms.game.achievementManager.moddersAck.quantity.times(0.1)
            | format: true
        }}
      </td>
    </tr>
    <tr *ngIf="ms.game.prestigeManager.doubleModsCard.active">
      <td colspan="4" class="row-title">Prestige</td>
    </tr>
    <tr *ngIf="ms.game.prestigeManager.doubleModsCard.active">
      <td>Double mod card</td>
      <td class="monospace text-right"></td>
      <td class="monospace"></td>
      <td class="monospace">= x{{ 1.5 | format }}</td>
    </tr>
    <tr *ngIf="ms.game.prestigeManager.maxMods.quantity.gt(0)">
      <td>{{ ms.game.prestigeManager.maxMods.name }}</td>
      <td class="monospace text-right">
        {{ ms.game.prestigeManager.maxMods.realQuantity | format }}
      </td>
      <td class="monospace">
        x{{ ms.game.prestigeManager.prestigeMultiplier | format }}
      </td>
      <td class="monospace">
        = x{{
          ms.game.prestigeManager.maxMods.quantity.times(0.01).plus(1) | format
        }}
      </td>
    </tr>
  </table>
</ng-template>
